<template>
    <div class="goods">
        <div class="title">商品管理</div>
        <!-- 筛选 -->
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="上线的二手物品" name="up"></el-tab-pane>
                <el-tab-pane label="下架的二手物品" name="down"></el-tab-pane>
            </el-tabs>
        </div>
        <div>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="发布日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="productname"
                    label="二手物品名称">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="发布用户"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="价格"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="180">
                    <template slot-scope="scope">
                        <el-button type="danger">违规下架</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
                layout="prev, pager, next"
                :total="50">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            activeName: 'up',
            tableData: [{
                date: '2024-03-02 12:00:27',
                name: '王小虎',
                productname:'加湿器',
                price: '20.00'
            },{
                date: '2016-05-02 12:00:27',
                name: '王小虎',
                productname:'吕氏春秋',
                price: '200.00'
            }, {
                date: '2016-05-02 12:00:27',
                name: '王小',
                productname:'孙子兵法',
                price: '120.00'
            }, {
                date: '2016-05-02 12:00:27',
                name: '小虎',
                productname:'冰红茶',
                price: '30.00'
            }, ]
        };
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
    }
}
</script>
<style scoped>
.el-table th {
    background-color: #fff ; 
    font-size: 16px;
    font-weight: 500;
    color: #000;
    height: 40px;
}
.goods{
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}
.goods .title{
    font-size: 20px;
    margin-bottom: 10px;
}
.goods .page{
    margin-top: 15px;
}
</style>